<template>
  <div>
    <VMask v-if="isShow" @click="isShow=0"></VMask>
    <transition name="up">
    <div v-if="isShow" class="select-bottom">
      <div class="s-bar">
        <a class="cl-btn" v-click="close">取消</a>
        <!-- <a class="cfm-btn" v-click="confirm">确认</a> -->
      </div>
      <div class="s-main">
        <ul class="s-list" v-click="select">
          <li v-for="(d,i) of list" :key="d[idKey]" :data-id="d[idKey]" :data-index="i" class="s-item" :class="{selected:selectedId===d[idKey]}">{{d[nameKey]}}</li>
        </ul>
        <p class="cf"></p>
      </div>
    </div>
    </transition>
  </div>

</template>

<script>
import VMask from '@/modules/mask'
export default {
  components: {
    VMask
  },
  data () {
    return {
      isShow: 0,
      list: [],
      selectedId: '',
      selectedData: null,
      idKey: 'id',
      nameKey: 'name'
    }
  },
  methods: {
    close () {
      this.isShow = 0
    },
    show () {
      this.isShow = 1
    },
    setOptions (options) {
      if (!options) return
      let {list, selectedId, onConfirm, onChange, idKey, nameKey} = options
      if (list) this.list = list
      if (selectedId) this.selectedId = selectedId
      if (onConfirm) this.onConfirm = onConfirm
      if (onChange) this.onChange = onChange
      if (idKey) this.idKey = idKey
      if (nameKey) this.nameKey = nameKey
    },
    select ({target}) {
      if (target.tagName === 'LI') {
        let {list} = this
        this.selectedId = target.dataset.id
        this.selectedData = list[target.dataset.index]
        this.confirm()
      }
    },
    confirm () {
      if (this.onConfirm(this.selectedData) === false) return
      this.close()
    }
  }

}
</script>

<style scoped>
  .s-list {
    margin-left: 2px;
    margin-top: -3px;
    .s-item {
      margin-left: 18px;
      margin-top:26px;
      font-size: 14px;
      border:1px solid #85b2dd;
      color:#85b2dd;
      float: left;
      padding: 5px 20px;
      border-radius: 4px;
      &.selected {
        border:1px solid #4988c4;
        background: #4988c4;
        color: #fff;
      }
    }
  }
  .select-bottom{
    background-color: #eee;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    .s-bar{
      height: 40px;
      border-bottom: 1px solid #ccc;

      .cl-btn{
        text-align: center;
        line-height: 40px;
        font-size: 16px;
        color: #26a2ff;
        float: left;
        width: 100%;
      }
    }
    /* .s-tit{
      display: flex;
      text-align: center;
      .s-t{
        flex: 1;
        font-size: 14px;
        line-height: 28px;
        height: 28px;
      }
    } */
    .s-main{
      overflow: auto;
      padding-bottom: 20px;
      min-height: 100px;
      /* display: flex; */
      max-height: 200px;
    }
  }

  .up-enter-active, .up-leave-active {
    transition: .2s;
    transition-property:opacity,transform;
  }
  .up-enter, .up-leave-to {
    opacity: 0;
    transform: translate3d(0, 99%, 0);
  }

</style>
